<template>
  <div>
     <div class="tabCard">
       <!--<div :class="{'tabName':true,'activeTab':nowTab=='suppliermangement'}" v-on:click="nowTab='suppliermangement'" >
            供应商
          </div>-->
          <div :class="{'tabName':true,'activeTab':nowTab=='subcontractor'}" v-on:click="nowTab='subcontractor'" >
            分包商
          </div>
          <div :class="{'tabName':true,'activeTab':nowTab=='subcontractrecord'}" v-on:click="nowTab='subcontractrecord'" >
            分包记录
          </div>
      </div>
      <!--<div v-if="nowTab=='suppliermangement'" class="suppliermanageTab">
        <suppliermangement :userOpernation = "userOpernation"></suppliermangement>
      </div>-->
      <div v-if="nowTab=='subcontractor'" class="suppliermanageTab">
        <subcontractor :userOpernation = "userOpernation"></subcontractor>
      </div>
      <div v-if="nowTab=='subcontractrecord'" class="suppliermanageTab">
        <subcontractrecord :userOpernation = "userOpernation"></subcontractrecord>
      </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
const subcontractor = () =>import('../subcontractor/subcontractor.vue');
const subcontractrecord = () =>
		import('../subcontractor/subcontractrecord.vue');  

export default {
  data () {
    return {
      nowTab:'subcontractor',  //页签默认显示供应商

    }
  },
  props:["userOpernation"],
  computed: {
      ...mapState([ 'daibanItem', 'daibanItemShow']),
    },
  created(){
      // if (this.daibanItemShow && this.daibanItem.businessType == "t_subcontractor") {
      //   this.nowTab = 'subcontractor'
      // }else{
      //       this.nowTab = 'suppliermangement'
      //   }
  },
  watch:{
    daibanItem(newer, older) {
        if (this.daibanItemShow) {
          this.nowTab = 'subcontractor'
          console.log(this.daibanItem)
          // if(this.daibanItem.businessType == "t_subcontractor"){
          //   this.nowTab = 'subcontractor'
          // }else{
          //   this.nowTab = 'suppliermangement'
          // }
        }
      },
  },
   components: {
			subcontractor,subcontractrecord
	},
  methods:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*.el-table__fixed-body-wrapper,.el-table__body-wrapper {
        height: calc(100% - 36px)
    }*/
    .infoitem{
      width: 390px;

    }
    .informationItem {
      width: 300px;
      float: none;
      margin-left: 8px;
    }
     .el-table__fixed-body-wrapper,.el-table__body-wrapper {
        height: calc(100% - 36px)
    }
   .supplierDialog .el-form .el-form-item{
      display:inline-block ;
      width: 48%;
    }
    .suppliermanageTab{
      height:calc(100% - 40px);
    }
</style>
<style>
  
</style>

